<script lang="ts" setup>
import { computed } from "vue";
import { QBtn, QMenu, QList, QSpace, QItem, QItemSection, QSeparator, QDate } from "quasar";

import { getRangeDay, getRangeWeek, getRangeMonth, getRangeYear, getTime } from "qqlx-cdk";

type _TimeDto = {
  startTime: string;
  endTime: string;
};
const vueProps = defineProps<_TimeDto>();

const string_start_time = computed(() => {
  return getTime(Number(vueProps.startTime || getRangeYear().startTime)).text;
});
const string_end_time = computed(() => {
  return getTime(Number(vueProps.endTime || getRangeYear().endTime)).text;
});

const emit = defineEmits<{
  (event: "change", data: _TimeDto): void;
}>();
const time_range = computed({
  get() {
    return {
      from: string_start_time.value,
      to: string_end_time.value,
    };
  },
  set(value) {
    if (typeof value === "string") {
      emit("change", {
        startTime: new Date(value + " 00:00:00").getTime().toString(),
        endTime: new Date(value + " 23:59:59").getTime().toString(),
      });
    } else if (value) {
      emit("change", {
        startTime: new Date(value.from + " 00:00:00").getTime().toString(),
        endTime: new Date(value.to + " 23:59:59").getTime().toString(),
      });
    }
  },
});
/*************** HTML ***************/
/*************** HTML ***************/
/*************** HTML ***************/
/*************** HTML ***************/
</script>

<template>
  <q-btn class="bg-white rounded" unelevated outline>
    <span>{{ string_start_time }} ~ {{ string_end_time }}</span>
    <q-menu class="flex flex-nowrap" transition-show="jump-down" transition-hide="jump-up">
      <q-list>
        <q-space></q-space>
        <q-item clickable @click="() => $emit('change', getRangeDay())">
          <q-item-section>今日</q-item-section>
        </q-item>
        <q-item clickable @click="() => $emit('change', getRangeWeek())">
          <q-item-section>本周</q-item-section>
        </q-item>
        <q-item clickable @click="() => $emit('change', getRangeMonth())">
          <q-item-section>本月</q-item-section>
        </q-item>
        <q-item clickable @click="() => $emit('change', getRangeYear())">
          <q-item-section>本年</q-item-section>
        </q-item>
        <q-space></q-space>
      </q-list>

      <q-separator vertical />
      <q-date flat range minimal no-unset color="primary" first-day-of-week="1" v-model="time_range" />
    </q-menu>
    <slot name="default"></slot>
  </q-btn>
</template>
